<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>毒鸡汤</title>
		<style>
			*{
				padding:0;margin:0;list-style: none;text-decoration: none;
				color:white
			}
			a {color:white}
			
			html,body{width:100%;height: 100%;}
			
			.content {
				
				text-align: center;
				margin:0 auto 20px;
			}
			.henshin {
				font-size: 16px;color:deepskyblue;skybackground-color: white;
				width:140px;
				height:46px;line-height: 46px;
				border-radius: 8px;
				border:none;
				box-sizing: border-box;
				position:relative;
				transform: translate(-50%,-50%);
				left:50%;
				margin: 30px auto;
				outline: none;
				box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5);
				transition:0.3s;
			}
			.henshin:hover{
				height:56px;line-height: 56px;
				width:160px;
			}
			.main{
				width:100%;height:800px;
				background-image: linear-gradient(#e66465, #9198e5);
				padding-top: 100px;
				/* filter: blur(30px); */
			}
			
			
			
			
			@media screen and (min-width:770px) {
				.header {
					background: url(../image/44036.jfif) no-repeat;
					background-size: 100% 100%;
					width:100%;height:100%;
					
					box-sizing: border-box;
					padding-top: 180px;
				}
				.nav {
					width:100%;height:40px;padding:8px;
				}
				.nav ul .ii {display:none;}
				.nav ul {
					margin:0 auto 80px;
					width:770px;
					position:relative;z-index: 33;color:white;
					display:flex;justify-content: center;
					
				}
				.nav ul li {
					flex:1;height:30px;line-height: 30px;
					width:60px;box-sizing: border-box;
					margin:0 10px 10px 0;
					text-align: center;
				}
				.nav ul li:hover {
					background-color: white;
					border-radius: 12px;
				}
				.nav ul li a:hover {
					color:skyblue
				}
				.nav ul .current {
					border: 1px solid white;
					border-radius: 12px;
					background-color: white;
				}
					.nav ul .current a {
						color:deepskyblue;
					}			
				
			}
			
			
			@media screen and (max-width:770px) {
				.header {
					background: url(../image/44036.jfif) no-repeat;
					background-position:top left;
					background-size: 140% 140%;
					/* background-size: 100% 100%; */
					width:100%;height:100%;
					padding-top:180px;
					box-sizing: border-box;
				}
				/* .nav ul {display:flex;} */
				.ii {width:30px;height:30px;display: inline;position:relative;top:5px;
				
				}
				.nav {
					width:100%;background-color: deepskyblue;height:40px;margin-bottom: 80px;
					line-height: 40px;
				}
				.nav ul li {display:none;}
				.nav ul .current {
					display:inline;height:40px;margin:0 auto;width:100px;
				}
				.nav_active {
					position:relative;z-index: 99;
					width:100%;background-color: royalblue;height:200px;
					line-height: 40px;
					overflow: hidden;
				}
				
			}
			/* 
			此时的效果为点击标签会跳转也页面;
			在不使用框架,又不让地址发生跳转;并且页面部分内容发生改变,利用选项卡的操作 
			*/
		</style>
	</head>
	<body>
		<div class="header">
			<nav class="nav" style="transition:1s;position: fixed;top:0;">
			    <ul class="list"> 
					<img src="../image/nav.png" alt="dao" class="ii">
			        <li ><a href="../index.html">每日诗词</a></li>
			        <li ><a href="./heisei.html">百人一首</a></li>
			        <li class="current"><a href="javascript:;">毒鸡汤</a></li>
			        <li><a href="./article.html">每日一篇</a></li>
			        <!-- <li><a href="javascript:;">Graphic Desig</a></li> -->
			    </ul>
			</nav>
			<div class="content" style="margin-bottom:60px;width:70%;">
				<h3 class="sentence" style="color:deepskyblue"></h3>
			</div>
			<button class="henshin">换一句</button>
				
				
		</div>
		
	<script type="text/javascript">	
		let ii =document.getElementsByClassName('ii');
		// let xx =document.getElementsByClassName('list');
		let list =document.getElementsByTagName("li");
		let nav =document.getElementsByTagName('nav');
		let flag =false;
		
		ii[0].addEventListener('click',function(){
			if(flag) {
				for(let i=0;i<list.length;i++){
					if(list[i].className =="current") {
						list[i].style.display ="inline"
						continue;
					}
					list[i].style.display="none";
				}
				nav[0].className="nav";
				
				flag=false;
				return;
			}
			nav[0].className="nav_active";
			setTimeout(function(){
				for(let i=0;i<list.length;i++){
					// list[i].className="";
					list[i].style.display="block";
				}
			},100)
			flag =true;
		})
		
		
		var sentence =[
			"别以为你一无所有，至少你还有丑",
			"人如果没有梦想，那跟无忧无虑有什么分别？",
			"咸鱼翻了身，也还是咸鱼。",
			"生活和电影不一样，生活难多了",
			"人生前期千万不要因为没钱而觉得悲哀 因为你以后没钱的日子还有很长。",
			"你就像我的阳光，看着就刺眼。",
			"这一秒不放弃，下一秒，就更绝望了。",
			"你复杂的五官，掩饰不了，你朴素的智商。",
			"诗和远方越远越脏 以梦为马越骑越傻",
			"从小到大，唯一不变的，就是一颗不想念书的心。",
			"愿你所有的丧，都是临时医嘱。",
			"时间会帮你攒够失望，并告诉你不用谢。",
			"事事如意料之外，年年有余额不足！",
			"不逼自己一把，你都不知道，什么叫绝望。",
			"生活不止眼前的苟且，还有一辈子的苟且。",
			"你还是别把我放在心里了，我不喜欢人多的地方。",
			"谢谢你，在我每次需要你的时候都掉链子",
			"不爱你的人，比你想象中的还不爱你。",
			"有些事情做不完,就留到明天做吧。运气好的话,明天死了就不用做了",
			"你把所有不一定，都变成了一定不",
			"不是因为看到希望了才去坚持,而是坚持了才知道没有希望",
			"哪里跌倒，就在哪里睡觉！",
			"我要没点自欺欺人的本事，还真活不到现在。",
			"生活没有翻不过去的坎，只有翻不完的坎。",
			"每天都有新的期待，才有新的失望",
			"愚人节，只是给说谎的人，一个说真话的机会"
		]
		
		var newSentence =sentence.sort(function() {
			let a =Math.random();
			return a-0.5;
		})
		var sen =document.getElementsByClassName("sentence")
		var henshin =document.getElementsByClassName("henshin")
		sen[0].innerText =newSentence[0];
		henshin[0].onclick =function() {
			let newSen =sentence.sort(function() {
				let a =Math.random();
				return a-0.5;
			})
			sen[0].innerText =newSen[0];
		}
		</script>
	</body>
</html>
